<template>
  <div class="wrap">
    <div class="search">
      <input type="text" placeholder="输入姓名、电话、地址快速查找" />
      <img src="../assets/search.png" alt />
    </div>
    <div class="title">
        <div class="left">
            <img src="../assets/address.png" alt="">
            <p>我的地址</p>
        </div>
        <p class="add" @click="go_address">新增地址</p>
    </div>
    <div class="list">
        <div class="item">
            <div class="le">
                <div>
                    <p>马克先生</p>
                    <p>13359883549</p>
                </div>
                <p>辽宁省沈阳市铁西区万达广场</p>
            </div>
            <div class="ri">
                <span>编辑</span>
                <span>删除</span>
            </div>
        </div>
        <div class="item">
            <div class="le">
                <div>
                    <p>马克先生</p>
                    <p>13359883549</p>
                </div>
                <p>辽宁省沈阳市铁西区万达广场</p>
            </div>
            <div class="ri">
                <span>编辑</span>
                <span>删除</span>
            </div>
        </div>
        <div class="item">
            <div class="le">
                <div>
                    <p>马克先生</p>
                    <p>13359883549</p>
                </div>
                <p>辽宁省沈阳市铁西区万达广场</p>
            </div>
            <div class="ri">
                <span>编辑</span>
                <span>删除</span>
            </div>
        </div>
        <div class="item">
            <div class="le">
                <div>
                    <p>马克先生</p>
                    <p>13359883549</p>
                </div>
                <p>辽宁省沈阳市铁西区万达广场</p>
            </div>
            <div class="ri">
                <span>编辑</span>
                <span>删除</span>
            </div>
        </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search {
  background: #eeeded;
  height: 1.066667rem;
  width: 9.2rem;
  margin: 0.306667rem auto 0.4rem;
  border-radius: 0.266667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    border: none;
    outline: none;
    background: transparent;
    margin-left: 15px;
  }
  img {
    width: 0.533333rem;
    height: 0.533333rem;
    display: block;
    margin-right: 15px;
  }
}
.title{
 display: flex;
 justify-content: space-between;
 align-content: center;
 width: 8.16rem;
 margin: 0 auto;
 .left{
     display: flex;
     align-items: center;
 }
 img{
     width: .4rem;
     height: .4rem;
     margin-right: .2rem
 }
 p{
     color: #999;
     font-size: .32rem;
 }
 .add{
     background: #719BEF;
     color: #fff;
     font-size: .32rem;
     padding: 2px 15px;
     border-radius: .4rem;
 }
}
.list{
    padding-top: .8rem;
    .item{
        width: 8.16rem;
        margin: 0 auto 15px;
        height: 1.493333rem;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .le{
            div{
                display: flex;
                align-items: center;
                p{
                    color: #555;
                    font-size: .373333rem;
                    font-weight: 600;
                    margin-right: 15px;
                    text-align: left;
                    line-height: .6rem
                }
            }
            >p{
                color: #999;
                font-size: .293333rem;
                text-align: left;
            }
        }
        .ri{
            span{
                color: #719BEF;
                font-size: .32rem;
                margin-left: 8px;
            }
        }
    }
    
}
</style>
<script>
export default {
    methods:{
        go_address(){
            this.$router.push('/setAddress')
        }
    }
}
</script>